<template>
	<view class="index_wrap">
		<!-- 头部导航开始 -->
		<view class="header_search" @click="goToSearch">
			<view class="left_icon iconfont icon-qian"></view>
			<view class="search">
				<icon class="searchIcon iconfont icon-sousuo-copy"></icon>
				搜索
			</view>
			<view @click="goToPublish" class="right_icon iconfont icon-bi"></view>
		</view>
		<!-- 头部导航结束 -->

		<!-- tab导航开始 -->
		<Tabs @changeIndex="tabTap" :tabBars="tabBars" :tabIndex="tabIndex"></Tabs>
		<!-- tab导航结束 -->

		<!-- 新闻列表开始 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{ height: swiperHight + 'px' }" :current="tabIndex" @change="tabChnage">
				<swiper-item v-for="(items, index) in news" :key="index">
					<scroll-view @scrolltolower="pullUpLoad(index)" scroll-y class="list">
						<template v-if="items.list.length">
							<!-- 图文列表 -->
							<block v-for="(item, index1) in items.list" :key="index1"><NewList :itemList="item" :index1="index1"></NewList></block>
							<!-- 上拉加载 -->
							<PullUpLoad :loadtext="items.loadtext"></PullUpLoad>
						</template>
						<!-- 没有图文数据显示的图片 -->  
						<template v-else>
							<NothingPic></NothingPic>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新闻列表结束 -->
	</view>
</template>

<script>
import Tabs from '@/components/tabs/tabs';
import NewList from '../../components/newList/newList';
import PullUpLoad from '../../components/pullUpLoad/pullUpLoad.vue';
import NothingPic from '../../components/nothingPic/nothingPic';
export default {
	components: {
		Tabs,
		NewList,
		PullUpLoad,
		NothingPic
	},
	data() {
		return {
			// swiper高度
			swiperHight: 200,
			tabIndex: 0,
			// 顶部tab导航
			tabBars: [
				{
					name: '关注',
					id: 'guanzhu'
				},
				{
					name: '推荐',
					id: 'tuijian'
				},
				{
					name: '体育',
					id: 'tiyu'
				},
				{
					name: '热点',
					id: 'redian'
				},
				{
					name: '财经',
					id: 'caijing'
				},
				{
					name: '娱乐',
					id: 'yule'
				},
				{
					name: '军事',
					id: 'junshi'
				},
				{
					name: '历史',
					id: 'lishi'
				},
				{
					name: '本地',
					id: 'bendi'
				}
			],
			news: [
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称1',
							isguanzhu: false,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: false,
							title: '我是标题',
							type: 'img', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							infonum: {
								index: 0, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						},
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							isguanzhu: true,
							title: '我是标题',
							type: 'video', // img:图文,video:视频
							titlepic: '../../static/demo/datapic/11.jpg',
							playnum: '20w',
							long: '2:47',
							infonum: {
								index: 1, //0:没有操作，1:顶,2:踩；
								dingnum: 11,
								cainum: 11
							},
							commentnum: 10,
							sharenum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				}
			]
		};
	},
	onLoad() {
		// 获取可使用窗体高度
		uni.getSystemInfo({
			success: res => {
				let hight = res.windowHeight - uni.upx2px(180);
				this.swiperHight = hight;
			}
		});
	},
	methods: {
		// 切换顶部tab点击颜色
		tabTap(index) {
			this.tabIndex = index;
		},
		tabChnage(e) {
			/* 获取swiper滚动的索引 */
			let curentIndex = e.detail.current;
			this.tabIndex = curentIndex;
		},
		// 上拉加载更多
		pullUpLoad(index) {
			// 判断数据
			if (this.news[index].loadtext !== '上拉加载更多') {
				return;
			}
			// 修改状态
			this.news[index].loadtext = '加载中...';
			setTimeout(() => {
				let obj = {
					userpic: '../../static/demo/userpic/12.jpg',
					username: '昵称',
					isguanzhu: true,
					title: '我是标题',
					type: 'video', // img:图文,video:视频
					titlepic: '../../static/demo/datapic/11.jpg',
					playnum: '20w',
					long: '2:47',
					infonum: {
						index: 1, //0:没有操作，1:顶,2:踩；
						dingnum: 11,
						cainum: 11
					},
					commentnum: 10,
					sharenum: 10
				};
				this.news[index].list.push(obj);
				this.news[index].loadtext = '上拉加载更多';
			}, 1000);
			// this.news[index].loadtext = '没有加载的数据'
		},

		goToSearch() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		// 进入到发布页面
		goToPublish() {
			uni.navigateTo({
				url: '../publish/publish'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.index_wrap {
	.header_search {
		display: flex;
		height: 80rpx;
		align-items: center;
		overflow: hidden;
		.search {
			flex: 1;
			display: flex;
			justify-content: center;
			width: 100%;
			color: #ccc;
			.searchIcon {
				display: flex;
				padding-right: 10rpx;
				align-items: center;
			}
		}
		.left_icon {
			font-size: 50rpx;
			vertical-align: middle;
			padding: 15rpx;
		}
		.right_icon {
			font-size: 40rpx;
			vertical-align: middle;
			padding: 15rpx;
		}
	}
	.uni-tab-bar {
		.swiper-box {
			.list {
				.loadText {
					color: #aaa;
					padding: 20rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
